<template>
    <el-dialog class="ba-operate-dialog" :close-on-click-modal="false" :model-value="modelValue" @close="closeForm">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                导入商品
            </div>
        </template>
        <el-scrollbar class="ba-table-form-scrollbar">
            <div class="ba-operate-form ba-add-form" :style="'width: calc(100% - ' + state.labelWidth / 2 + 'px)'">
                <el-form ref="formRef" @keyup.enter="onAddSubmit()" label-position="right" :label-width="160">
                    <FormItem label="品牌" type="remoteSelect" v-model="state.form.goods_brand_id" prop="goods_brand_id" :input-attr="{ params: { isTree: true, treeAll: true }, pk: 'id', field: 'name', 'remote-url': '/admin/goods.brand/index' }" placeholder="请选择品牌" />
                    <FormItem :label="t('季度编码')" type="string" v-model="state.form.quarter_code" prop="quarter_code" placeholder="请输入季度编码" />
                    <FormItem label="文件" type="file" v-model="state.form.file" prop="id" :placeholder="t('Please input field', { field: t('goods.goods.cover') })" :input-attr="{ hideSelectFile: true }" />
                </el-form>
            </div>
        </el-scrollbar>
        <template #footer>
            <div :style="'width: calc(100% - ' + state.labelWidth / 1.8 + 'px)'">
                <el-button @click="closeForm">{{ t('Cancel') }}</el-button>
                <el-button v-blur :loading="state.submitLoading" @click="onAddSubmit()" type="primary"> 立即导入 </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, inject } from 'vue'
import FormItem from '/@/components/formItem/index.vue'
import type { FormInstance, FormRules } from 'element-plus'
import { importApi } from '/@/api/backend/goods/goods'
import { useI18n } from 'vue-i18n'

interface Props {
    modelValue: boolean
    configGroup: anyObj
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: false,
    configGroup: () => {
        return {}
    },
})

const emits = defineEmits<{
    (e: 'update:modelValue', value: boolean): void
}>()



const closeForm = () => {
    emits('update:modelValue', false)
}

const { t } = useI18n()
const formRef = ref<FormInstance>()
const state = reactive({
    inputTypes: {},
    labelWidth: 180,
    submitLoading: false,
    form: {
        file: '',
        goods_brand_id: 0,
        quarter_code: '',
    },
    formItemData: {
        dict: `key1=value1
key2=value2`,
    },
})



const baTable = inject('baTable') as baTableClass

const onAddSubmit = () => {
    importApi(state.form).then((e: object) => {
        state.form.file = '';
        state.form.goods_brand_id = 0;
        emits('update:modelValue', false)
        console.log(e)
        baTable.onTableHeaderAction('refresh', {})
    })
}
</script>

<style scoped lang="scss"></style>
